<style lang="less" scoped>
.mark {
    display: flex;

    span {
        margin-right: 5px;
    }
}
</style>
<template>
    <el-page-header @back="goBack">
        <template #content>
            <span>新博客</span>
        </template>
    </el-page-header>
    <el-form :model="blog" ref="blogForm" status-icon label-width="auto" style="max-width: 1440px;margin: 20px auto 0;">
        <el-form-item>
            <el-input v-model="blog.title" placeholder="标题" />
        </el-form-item>
        <el-form-item>
            <div class="mark">
                <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                    @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 参考链接</el-button>
            </div>
        </el-form-item>
        <el-form-item>
            <el-select v-model="blog.blog_genre_id" placeholder="分类">
                <el-option v-for="item in blogStore.genres" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <editor v-model="blog.content" :init="editorInit" :api-key="apiKey" />
        </el-form-item>
        <el-form-item>
            <el-select v-model="blog.mark_id" multiple placeholder="标签">
                <el-option v-for="item in blogStore.marks" :key="item.id" :label="item.title" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-button type="primary" @click="submitBlog">
            确定
        </el-button>
    </el-form>
</template>
<script setup>
// 依赖引入
import { ref, onMounted } from 'vue';
import Editor from '@tinymce/tinymce-vue';
import router from '@/router';
import axios from '@/api/index';
import { useRoute } from 'vue-router';
import { useBlogStore } from '@/stores/blog';

// 获取编辑的id
const route = useRoute();
const id = ref(route.params.id);

// TinyMCE API Key（如果你有）
const apiKey = 'your-tiny-mce-api-key';

// 初始化TinyMCE
const editorInit = {
    language: 'zh-Hans', // 设置语言为中文
    height: 500,
    width: '100%',
    menubar: false,
    plugins: 'accordion link image table media code fullscreen preview codesample advlist lists',
    toolbar: "blocks fontfamily fontsize forecolor backcolor align removeformat | hr bold italic underline strikethrough  | numlist bullist | blockquote  codesample accordion link image table media | code fullscreen preview",
    toolbar_mode: 'wrap',
};

// 获取标签和分类
const blogStore = useBlogStore();

// 编辑参考链接
const inputValue = ref('')
const dynamicTags = ref([])
const inputVisible = ref(false)
const InputRef = ref();

const handleClose = (tag) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true;
}
const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
// 返回主页
const goBack = () => {
    router.push('/')
}

// blog数据
const blog = ref({});
const blogForm = ref(null);
// 数据提交
const submitBlog = () => {
    blogForm.value.validate((valid) => {
        if (valid) {
            blog.value.refer_url = dynamicTags.value.join('!@');
            axios.post('/blog/create', blog.value).then((res) => {
                if (res.code == 200) {
                    goBack();
                }
            })
        } else {
            return false;
        }
    })
}

// 页面加载执行函数
onMounted(() => {
    if (id.value) {
        axios.get('/blog/detail/' + id.value).then((res) => {
            if (res.code == 200) {
                blog.value = res.data;
                dynamicTags.value = res.data.refer_url ? res.data.refer_url.split('!@') : [];
            }
        })
    }
})
</script>